<template>
  <div>
    <el-button type="primary" @click="showEditForm = true; editForm = {}">Add</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column label="User Info">
        <template slot-scope="scope">
          <div v-if="!scope.row.editing">
            <span>{{ scope.row.name }}</span>
            <el-button size="mini" @click="startEditing(scope.$index)">Edit</el-button>
            <el-button size="mini" type="danger" @click="deleteRow(scope.$index)">Delete</el-button>
          </div>
          <div v-else>
            <el-form :model="scope.row" inline class="demo-table-inline-edit">
              <el-form-item label="Name">
                <el-input v-model="scope.row.name"></el-input>
              </el-form-item>
              <el-form-item label="Password">
                <el-input v-model="scope.row.password" type="password"></el-input>
              </el-form-item>
              <el-form-item label="Age">
                <el-input v-model="scope.row.age" type="number"></el-input>
              </el-form-item>
              <el-form-item label="Gender">
                <el-select v-model="scope.row.gender" placeholder="Select">
                  <el-option label="Male" value="male"></el-option>
                  <el-option label="Female" value="female"></el-option>
                </el-select>
              </el-form-item>
              <el-button size="mini" @click="saveRow(scope.$index)">Save</el-button>
              <el-button size="mini" type="danger" @click="cancelEditing(scope.$index)">Cancel</el-button>
            </el-form>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="showEditForm" title="Edit Form">
      <el-form :model="editForm" inline class="demo-table-inline-edit">
        <!-- 同上表单项 -->
        <el-form-item label="Name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="Password">
          <el-input v-model="editForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="Age">
          <el-input v-model="editForm.age" type="number"></el-input>
        </el-form-item>
        <el-form-item label="Gender">
          <el-select v-model="editForm.gender" placeholder="Select">
            <el-option label="Male" value="male"></el-option>
            <el-option label="Female" value="female"></el-option>
          </el-select>
        </el-form-item>
        <span  class="dialog-footer">
          <el-button @click="showEditForm = false">Cancel</el-button>
          <el-button type="primary" @click="addOrUpdateRow">Save</el-button>
        </span>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 初始数据
      ],
      editForm: {},
      showEditForm: false,
      currentEditingIndex: null,
    };
  },
  methods: {
    startEditing(index) {
      this.currentEditingIndex = index;
      this.$set(this.tableData, index, { ...this.tableData[index], editing: true });
    },
    cancelEditing(index) {
      this.$set(this.tableData, index, { ...this.tableData[index], editing: false });
      this.currentEditingIndex = null;
    },
    saveRow(index) {
      this.$set(this.tableData, index, { ...this.tableData[index], editing: false });
      // 这里可以添加保存数据的逻辑，比如发送到服务器
    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
    addOrUpdateRow() {
      if (this.currentEditingIndex !== null) {
        // 编辑现有行
        this.saveRow(this.currentEditingIndex);
        this.currentEditingIndex = null;
      } else {
        // 添加新行
        this.tableData.push({ ...this.editForm, editing: false });
        this.showEditForm = false;
        this.editForm = {};
      }
    },
  },
};
</script>

<style scoped>
.demo-table-inline-edit .el-form-item {
  margin-right: 10px;
  margin-bottom: 0;
}
</style>
